<template>
  <div style="width: 33%;height: 32vh">
    <div ref="chart" style="width:100%;height:100%"></div>
  </div>
</template>
<script>
// import echarts from 'echarts'
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
export default ({
  methods: {
    getEchartData(opt) {
      const chartDom = this.$refs.chart;
      if (!chartDom) {
        console.log("未获取到对应的DOM元素");
        return;
      }
      if (echarts) {
        const myChart = echarts.init(chartDom);
        const option = opt
        myChart.setOption(option)
        window.addEventListener("resize", function () {
          myChart.resize()
        })
      }
      this.$on('hook:destroyed', () => {
        window.removeEventListener("resize", function () {
          myChart.resize();
        });
      })
    },
    init(data) {
      this.getEchartData({
        title: {
          text: '内存使用率',
          left: 'center',
          textStyle: {
            color: '#606060'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          bottom: 10,
          left: 'center',
        },
        series: [
          {
            type: 'gauge',
            progress: {
              show: true,
              width: 18
            },
            axisLine: {
              lineStyle: {
                width: 18
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              length: 15,
              lineStyle: {
                width: 2,
                color: '#999'
              }
            },
            axisLabel: {
              distance: 25,
              color: '#999',
              fontSize: 10
            },
            anchor: {
              show: true,
              showAbove: true,
              size: 25,
              itemStyle: {
                borderWidth: 10
              }
            },
            title: {
              show: false
            },
            detail: {
              formatter: '{value} %',
              valueAnimation: true,
              fontSize: 25,
              offsetCenter: [0, '70%']
            },
            data: [
              {
                value: data
              }
            ]
          }
        ]
      })
    }

  },
})
</script>

